<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testFilter</title>
    <script src="../public/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 在双花括号中 -->
    {{ message | capitalize }}

    <!-- 在 `v-bind` 中 -->
    <div v-bind:id="rawId | formatId"></div>
</div>
</body>
<!-- js过滤器 -->
<script type="text/javascript">
    const arr = [
        {
            name: 'tom1',
            age: 23
        },
        {
            name: 'tom2',
            age: 42
        },
        {
            name: 'tom3',
            age: 17
        },
        {
            name: 'tom4',
            age: 13
        },
    ]
    const res = arr.filter(item => item.age > 18);
    console.log(res);
    console.log(arr);
</script>
<!-- vue过滤器 -->
<script type="text/javascript">
    let app = new Vue({
        el: '#app',
        data: {
            message: '123456'
        },
        filters: {
            capitalize: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    })
</script>
</html>